<template>
  <div>
    <h3>detail:{{ type }}</h3>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Detail",
  });
</script>
<script lang="ts" setup>
  import { computed, watch } from "vue";
  import { useRoute } from "vue-router";
  /* 
  useRoute
    返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。
    只要动态路由参数发生改变,route对象就会随之改变
*/
  const route = useRoute();
  // const type = route.params.type;

  //动态的获取动态路由参数
  const type = computed(() => {
    return route.params.type;
  });

  watch(route, () => {
    console.log("route变了", route.params.type);
  });
</script>

<style lang="less" scoped></style>
